<title>Mapa</title>

<?php
// Se retoma la session.
session_start();
// Se establecen cookies de session para http o https
setcookie(session_name(), session_id(), NULL, NULL, NULL, 0);
setcookie(session_name(), session_id(), NULL, NULL, NULL, 1);
?>
<style>
    html, body, #map-canvas {
        height: 100%;        
    }
    
</style>

<link rel="stylesheet" type="text/css" href="../../css/kickstart.css" media="all" /> 
<link rel="stylesheet" type="text/css" href="../../css/bootstrap.css" media="all" /> 
<script src="http://maps.googleapis.com/maps/api/js?v=3.10&sensor=true"></script>
<script src="../../js/jquery-2.0.0.min.js"></script>
<!--Botones para estito alerts-->
	<link rel="stylesheet" href="../../css/alertify.core.css" />
	<link rel="stylesheet" href="../../css/alertify.default.css" id="toggleCSS" />
	<script src="../../js/alertify.min.js"></script>
        <script src="../../js/alertify.js"></script>
    <!--Fin Botones para estito alerts-->
<script type="text/javascript">
    var myLatlng1 = "";
    var myPosition = "";
    var map = "";
    var vectorMarcas = "";
    var poligonoCoords = [];
    $( "#map-canvas" ).empty();
    $( "#tableRecords" ).empty();
 $(document).ready(function(){
     //alert("ready");
     
     //Posicion central segun mi ubicacion
        if(navigator.geolocation) {
            
            //var myLatlng1 = new google.maps.LatLng((9.9358245+10.0151759+10.2160929+10.3621605)/4,(-84.0784551-84.2140615-83.7867463-83.7329742)/4);
            navigator.geolocation.getCurrentPosition(function(position) {
                        
                myLatlng1 = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

                myPosition = new google.maps.Marker({
                    position: new google.maps.LatLng(position.coords.latitude,position.coords.longitude),
                    map: map,
                    title: 'Yo estoy aqui !' + position.coords.latitude +","+ position.coords.longitude,
                    animation: google.maps.Animation.DROP,//BOUNCE   
                    icon:new google.maps.MarkerImage("../../img/PositionUser.png", new google.maps.Size(80, 60), null, new google.maps.Point(0, 30))
                });
                                           

                map.setCenter(myLatlng1);

            });
        }
        
        cargar_Universidades();
        
        
 });
 
 function recorrerUniversidades()
 {
     //Sin este alert no carga los clientes en los smartphone
     alert("Se estan cargando los clientes...");      
     
                    
     $("#marcasDB tr").each(function (index) 
        {
            
            var idCliente, latitud, longitud, nombre, direccion, telefono, imagen, sitioWeb, visitado;
            $(this).children("td").each(function (index) 
            {
                switch (index) 
                {
                    case 0: idCliente = $(this).text();
                            break;
                    case 1: latitud = $(this).text();
                            break;
                    case 2: longitud = $(this).text();
                            break;
                    case 3: nombre = $(this).text();
                            break;
                    case 4: direccion = $(this).text();
                            break;
                    case 5: telefono = $(this).text();
                            break;
                    case 6: imagen = $(this).text();
                            break;
                    case 7: visitado = $(this).text();
                            break;        
                }
                //$(this).css("background-color", "#ECF8E0");
                $(this).hide();
            })
            
            var marca = new Marcas(idCliente, latitud, longitud, nombre, direccion, telefono, imagen, visitado);
            //alert(marca.idCliente + '  ' + marca.latitud + '  ' + marca.longitud);
            vectorMarcas.push(marca);
        });
        
     
     
     
 }
 
 function cargar_Universidades()
    {       
        
        var accion='cargarUniversidades';
        //var fecha = CalcFecha();
        
        $.get("../../controladores/mapaControlador.php",{accion:accion},function(resultado){
            if(resultado == false)
            {
                alert("No existen clientes pendientes.");
                alrtify.error("No existen clientes pendientes.");
            }
            else
            {  
                //alert(resultado);
                $('#tableRecords').append(resultado);
                                                  
                                 
                
            }
        });
    }
</script>
     
    
<script type="text/javascript">
    
    
    function Marcas (idCliente, latitud, longitud, nombre, direccion, telefono, imagen, visitado) {
        this.idCliente = idCliente;
        this.latitud = latitud;
        this.longitud = longitud;
        this.nombre = nombre;
        this.direccion = direccion;
        this.telefono = telefono;
        this.imagen = imagen;
        this.visitado = visitado;  
    }
 
    Marcas.prototype.getInfo = function() {
        return this.latitud + ' ' + this.longitud;
    };


	
    function initialize() {
            //alert("initialize");     
        var index;
        var colorVisita = "";
        //var marcas1 = new Marcas("1",9.9358245,-84.0784551,"Calzado Passos","San Jose","656","zap1");
        //var marcas2 = new Marcas("2",10.0151759,-84.2140615,"Zapatateria","Cariari","656","zap");
        //var marcas3 = new Marcas("3",10.2160929,-83.7867463,"Zapatateria","San Jose","656","zap3");
        //var marcas4 = new Marcas("4",10.3621605,-83.7329742,"Zapatateria","Alajuela","656","zap4");
        
        vectorMarcas = [];
        
        recorrerUniversidades();
        $( "#marcasDB" ).remove();
        var marca = new Marcas();
        //Posicion central segun promedio
        //myLatlng1 = new google.maps.LatLng((9.9358245+10.0151759+10.2160929+10.3621605)/4,(-84.0784551-84.2140615-83.7867463-83.7329742)/4);
        myLatlng1 = new google.maps.LatLng(9.9211643,-84.0102759);       
                
        var mapOptions = {
            zoom: 9,
            center: myLatlng1,
            mapTypeId:google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);       
              
	
        for	(index = 0; index < vectorMarcas.length; index++) {
            marca = vectorMarcas[index];
            //alert(marca.latitud);
            
            if(marca.visitado == 1)
                colorVisita = '00FF00';
            else
                colorVisita= 'FF0000';
            window["marker" + index] = new google.maps.Marker({
                icon:new google.maps.MarkerImage("http://chart.googleapis.com/chart?chst=d_map_pin_letter&chld="+index+"|"+colorVisita+"|000000&.png", new google.maps.Size(80, 60), null, new google.maps.Point(0, 30)),
                position: new google.maps.LatLng(marca.latitud,marca.longitud),
                map: map,
                title: marca.nombre + ' esta en el punto: ' + marca.latitud +","+ marca.longitud,
                animation: google.maps.Animation.DROP//BOUNCE
                        
            });
		
            poligonoCoords.push(new google.maps.LatLng(marca.latitud,marca.longitud));              

            this["marker" + index]['infowindow'] = new google.maps.InfoWindow({
                //content:"<div id='contentInfoWindow' "+ index + " style='width: 300px; height: 300px; border: 1px solid #000;'>Este cliente esta en:" + marca.latitud +","+ marca.longitud +"</div>"
                content:"<div id='contentInfoWindow'"+index +" class='col_12'><div class='contentTxt'><h5>"+marca.nombre+"</h5><p>"+marca.direccion+"</div><div class='contentImg'><img src='../../img/"+marca.imagen+"' title='"+marca.nombre+"' width='152' height='142' /><br/><a href='../../img/"+marca.imagen+"'>"+marca.nombre+"</a></div>"+
                    "	</p> "+
                    "</div>"+
                    "<div class='clear'></div>"+
                    "</div>",
                maxWidth: 200
            });

            google.maps.event.addListener(this["marker" + index], 'click', function() {
                this['infowindow'].open(map, this);
            });	
				
        } 
        
         
            // Construct the polygon.
            polygonMap = new google.maps.Polygon({
                paths: poligonoCoords,
                strokeColor: '#FF0000',
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: '#FF0000',
                fillOpacity: 0.35
            });

            polygonMap.setMap(map); 
  
    }

   
    google.maps.event.addDomListener(window, 'load', initialize);

</script>

<div id="tableRecords">
    <?php include('../../menu.php'); ?>
    <ul class="breadcrumb">
    <li><a href="../../index.php">Inicio</a> <span class="divider">&raquo;</span></li>
    <li><a href="../../index.php?accion=validarCliente&controlador=cliente">Men&uacute; principal</a> <span class="divider">&raquo;</span></li>
    <li class="active">Mapa</li>
</ul>

<div id="map-canvas"></div>

</div>


